<template>
<view>
	<view class='title'>会员套餐:</view>
	<view class="item_list">
		<view  v-for="(item,index) in list" :key="index" class="item" 
		:class="{bgTrue1 : item.id == 2 && bgTrue1,'bgTrue2' : item.id == 3 && bgTrue2}"
		>
			<view class="item1">{{item.name}}</view>
			<view v-if="item.id == 3" class="item2">价格:{{item.score}}积分</view>
			<view v-else class="item2">价格:{{item.price}}元</view>
			<view class="item3" @click="payquery(item.id,index)">购买</view>
		</view>
	</view>
	
	<view class="orderForm" v-if="formShow" @click="formShow = false">
		<view class="payclass" @click.stop="">
			<view class="pop_top">
				<view class="po_top_1">订单确认</view>
				<image @click="formShow = false" src="/static/img/close.png"></image>
			</view>
			<view class="remark" v-if="id ==2">
				<view>1.新注册用户可享受20份简历免费领取</view>
				<view>2.每个用户只能领取一次</view>
				<view>3.有效期1个月</view>
			</view>
			<view class="remark" v-if="id ==3">
				<view>1.新注册用户可享受298积分兑换30份简历</view>
				<view>2.每个用户只能兑换一次</view>
				<view>3.有效期1个月</view>
			</view>
			<view class="remark" v-if="id ==4">
				<view>1.可沟通简历500份</view>
				<view>2.可使用积分抵扣298</view>
				<view>3.有效期12个月</view>
			</view>
			<view class="remark" v-if="id ==5">
				<view>1.可沟通简历1000份</view>
				<view>2.可使用积分抵扣698</view>
				<view>3.每天可获取精准人才推荐2名</view>
				<view>4.可直接查看明星人才电话100个</view>
				<view>5.可使用群发助手发送招聘信息推送1次(最多100人)</view>
				<view>6.有效期为12个月</view>
			</view>
			<view class="tr">
				<view class="th2">商品总价</view>
				<view class="th3" v-if="id == 3">{{money}}积分</view>
				<view class="th3" v-else>{{money}}元</view>
			</view>
			<view class="tr" v-if="status == 3">
				<view class="th2">积分抵扣</view>
				<!-- <view class="th3">{{payScore}}元</view> -->
				<view class="th3">
					<radio-group @change="bindRadio" class="view_input_radio1" data-name="sex">
						<label>
							<radio value="1" :checked="scoreTrue == 1"/>
							<view>是</view>
						</label>
						<label style="margin-left: 40rpx;">
							<radio value="2" :checked="scoreTrue == 2"/>
							<view>否</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="tr">
				<view class="th2">还需支付</view>
				<view class="th3">{{payMoney}}元</view>
			</view>
			
			<button v-if="payTrue" @click="pay" class="pboutom">支付</button>
		</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			imgUrl:this.url,
			list:[],
			bgTrue1:false,
			bgTrue2:false,
			id:0,
			payTrue:true,
			money:0,
			payMoney:0,
			payScore:0,
			formShow:false,
			scoreTrue:2,
			status:0,
			decScore:0
		}
	},
	onLoad:function(){
		this.getList()
	},
	methods:{
		getList:function(){
			var that = this
			request({
				url: 'vip/type',
				method: 'get',
				success: (res) => {
					if(res.data.code == 1){
					    that.list = res.data.data
						that.getUserVip(res.data.data)
					}
				}
			})
		},
		getUserVip:function(arr){
			var that = this
			var data = {uid:uni.getStorageSync('uid')}
			request({
				url: 'vip/user',
				method: 'get',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
					    that.bgTrue1 = res.data.data.bgTrue1
					    that.bgTrue2 = res.data.data.bgTrue2
					}
				}
			})
		},
		payquery:function(id,index){
			if(this.bgTrue1 && id == 2){
				uni.showToast({
					title: '只限新注册会员可领取,且只可领取一次,不可重复领取!!!',
					icon: "none", 
					position:'bottom',
				});
			    return;
			}
			if(this.bgTrue2 && id == 3){
				uni.showToast({
					title: '所有会员只可积分兑换一次,不可重复兑换!!!',
					icon: "none", 
					position:'bottom',
				});
			    return;
			}
			var money = 0
			this.id = id
			//this.item = this.list[index]
			if(id == 3){
			    this.money = this.list[index].score
			}else{
			    this.money = this.list[index]['price']
			}
			//判断当前机构的状态是否审核通过
			var that = this
			var data = {uid:uni.getStorageSync('uid')}
			request({
				url: 'member/info',
				method: 'get',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						//审核通过 计算积分
						that.order(res.data.data)
					  }
				},
			})
		},
		order:function(info){
			this.status = info.status
			if(info.status == 3){
				//审核通过
				if(this.id == 2){
					this.payScore = 0
					this.payMoney = 0
				}else if(this.id == 3){
					if(parseFloat(this.money) > parseFloat(info.integral)){
						uni.showToast({
							title: '您的积分余额为'+info.integral+'积分不足,不能抵扣!!!',
							icon: "none", 
							position:'bottom',
						});
					    return;
					}
					this.payScore = this.data.list[1].score
					this.payMoney = 0
				}else{
					this.payMoney = this.money
					this.decScore = 0
					var score = this.money/10 - info.integral;
					if(score > 0){
						//积分小于支付金额
						this.payScore = info.integral
						//this.payMoney = this.money - info.integral
					}else{
						//积分大于金额 全部积分支付
						this.payScore = this.money/10
						//this.payMoney = this.money/10*9
					}
				}
			}else{
				this.payScore = 0
				this.payMoney = this.money
			}
			this.formShow = true
			//this.$refs.popup.open('center')
		},
		close:function(){
			this.$refs.popup.close()
		},
		pay:function(){
			uni.showToast({
				title: '暂未接入!!!',
				icon: "none", 
				position:'bottom',
			});
			return;
		},
		bindRadio:function(e){
			this.scoreTrue = e.detail.value
			if(e.detail.value == 1){
				this.payMoney = this.money - this.payScore
			}else{
				this.payMoney = this.money
			}
			//console.log(e)
		}
	}
}
</script>
<style scoped>
.title{
    font-weight: bold;
    font-size:18px;
    border-bottom: 1rpx dashed #cccccc;
    padding-bottom: 10rpx;
	height:70rpx;
	line-height: 70rpx;
	padding-left:20rpx;
}
.item_list{
	padding-left: 2%;
	width:96%;
    padding-top:20rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.item{
    margin-top:20rpx;
    width:92%;
    height:80rpx;
    line-height: 80rpx;
    border:1rpx solid #000000;
    display:flex;
    flex-direction: row;
    padding:15rpx 15rpx 15rpx 15rpx;
    align-items: center;
}
.item1{
    width:30%;
    font-weight: bold;
    font-size:16px;
}
.item2{
    width:40%;
    color:#b30000;
    text-align: center;
}
.item3{
    width:30%;
    background:#FF7800;
    color:#ffff;
    height:70rpx;
    line-height: 70rpx;
    text-align: center;
    border-radius: 40rpx;
}
.bgTrue1{
    background: #cccccc;
}
.bgTrue2{
    background: #cccccc;
}
.payclass{
	width:80%;
	padding-bottom: 20rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	color:#000000;
}
.pop_top{
	display: flex;
	height:80rpx;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.pop_top image{
	width:50rpx;
	height:50rpx;
}
.po_top_1{
	width:70%;
	font-weight: bold;
	font-size: 17px;
}
.tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 70rpx;
    align-items: center;
    border-bottom:1px dashed #cccccc;
   }
.th1{width:100%;font-size:16px;font-weight:bold;}
.th2{
	width: 30%;
	justify-content: center;
	display: flex;
	height:60rpx;
	align-items: center;
}
.th3 {
	width: 70%;
	justify-content: center;
	display: flex;
	height:60rpx;
	align-items: center;
}
.pboutom{
	width:50%;margin-top:10px;
	height:30px;line-height:30px;
	background: #44b549;
	color:#FFFFFF;
	border-radius: 30rpx;
}
.remark{
    padding:0 20rpx 0 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.remark view{
	margin-top:10rpx;
}
.orderForm{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.5)
}
.view_input_radio1{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
	width:65%;
}
.view_input_radio1 label{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
}
</style>